@extends('admin.layout')
@section('title','新增视频')
@section('content1')
    <script src="/res/js/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/javascript"></script>
    <script src="/res/js/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".ui_timepicker").datetimepicker({
                format: 'yyyy-mm-dd hh:ii:ss',
                language:'zh-CN',
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
            })
        })
    </script>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" >
                <div class="col-md-12" id="content" >
                    <!-- 配置文件 -->
                    <script type="text/javascript" src="/res/js/ueditor/ueditor.config.js"></script>
                    <!-- 编辑器源码文件 -->
                    <script type="text/javascript" src="/res/js/ueditor/ueditor.all.js"></script>
                    <!-- 语言包文件(建议手动加载语言包，避免在ie下，因为加载语言失败导致编辑器加载失败) -->
                    <script type="text/javascript" src="/res/js/ueditor/lang/zh-cn/zh-cn.js"></script>

                    <div class="app_content_div" id="app_content_div_301Index">
                        <h3>新增视频</h3>
                    </div>

                    <form class="form-horizontal"  method="post" action="/adm/video/add-video">
                        @csrf

                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="title" name="title" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="url" class="col-sm-2 control-label"><span style="color:red;">*</span>视频路径</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="url" name="url" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="type" class="col-sm-2 control-label"><span style="color:red;">*</span>视频类型</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="type" id="video_type1" value="1" checked> 录播
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="type" id="video_type2" value="0"> 直播
                                </label>
                            </div>
                        </div>

                        <div class="form-group" >
                            <label for="description" class="col-sm-2 control-label"><span style="color:red;">*</span>课程简介</label>
                            <div class="col-sm-10">
                                <script id="description" type="text/plain"></script>
                                <script type="text/javascript">
                                    var editor = UE.getEditor('description')
                                </script>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="begin" class="col-sm-2 control-label"><span style="color:red;">*</span>直播开始时间</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control ui_timepicker" id="begin" name="begin" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="end" class="col-sm-2 control-label"><span style="color:red;">*</span>直播结束时间</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control ui_timepicker" id="end" name="end" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="upload_file" class="col-sm-2 control-label"><span style="color:red;">*</span>缩略图</label>
                            <div class="col-sm-10">
                                <input  id="upload_file" name="upload_file"  type="file" onchange="saveThumb()"/>
                                <input type="hidden" class="form-control" id="img_thumb" name="img_thumb" >
                                <img style="width:320px; height:200px;" alt="" id="thumb" src=""  />
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="expertlist" class="col-sm-2 control-label"><span style="color:red;">*</span>关联专家</label>
                            <div class="col-sm-10">
                                <select id="expert">
                                    <option value="">请选择</option>
                                    @foreach($oExpert as $v)
                                    <option value={{$v}}>{{$v->name}}</option>
                                    @endforeach
                                </select>
                                <button class="btn btn-default" type="button" onclick="addexpert()">添加</button>
                                <style>
                                    .expert{margin:5px;}
                                </style>
                                <div id="expertlist" name="expertlist"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <input name="dosubmit" type="button" value="提交" class="btn_p" onclick="addvideo()" >
                            </div>
                        </div>
                    </form>

                    <script>
                            function addexpert(){
                            var expert = $('#expert option:selected');//获取选中的专家
                            var flag = true;//布尔变量用于判断是否选择了某个专家
                            var experthtml = '';
                            var $added_expert = '';
                            if(expert.val())
                            {
                                $('#expertlist').find('input').each(function()
                                {
                                    if($(this).val()===expert.val())//判断专家重复
                                    {
                                        flag = false;
                                        return false;
                                    }
                                });
                                if(flag)
                                {
                                    experthtml += '<div>';
                                    experthtml += '	<input type="hidden" value="'+expert.val()+'" name="doc_id[]">';
                                    experthtml += '	<span class="expert">'+expert.text()+'</span>';
                                    experthtml += '	<span class="glyphicon glyphicon-remove mouse" onclick="$(this).parent().remove()"></span>';
                                    experthtml += '</div>';
                                    $('#expertlist').append(experthtml);
                                    $added_expert.append(expert.text());
                                }else{
                                    alert('您已经添加过该专家了');
                                    return false;
                                }
                            }else{
                                alert('请先选择一个专家');
                                return false;
                            }
                            }

                        function saveThumb(){
                            var upload_file = $("#upload_file").val();
                            var _token = "{{@csrf_token()}}";

                            $.ajaxFileUpload({
                                url:'/adm/expert/add/upload',
                                type:'PUT',
                                fileElementId:'img',
                                dataType:'json',
                                data:{
                                    'upload_file':upload_file,
                                    '_token':_token
                                },
                                success:function(data){
                                    if(data.success){
                                        alert("已完成");
                                        $('#thumb').attr('src', data['upload_file']);
                                    }else{
                                        alert(data.msg);
                                        $('#thumb').attr('src', '/res/images/10.jpg');
                                    }
                                }
                            })}



                        function addvideo(){
                            var title = $("#title").val();
                            var url = $("#url").val();
                            var description = UE.getEditor('description').getContentTxt();
                            var begin = $("#begin").val();
                            var end = $("#end").val();
                            var _token ="{{@csrf_token()}}";
                            $.post('/adm/video/add-video',
                                {
                                    "title": title,
                                    "url": url,
                                    "description":description,
                                    "begin": begin,
                                    "end": end,
                                    "_token": "{{@csrf_token()}}",
                                    'video_type1':($("#video_type1")[0].checked)?1:0,
                                    'video_type2':($("#video_type2")[0].checked)?1:0,
                                },
                                function (data){
                                    if(data.success){
                                        alert("已完成");
                                        location.href="/adm/video";
                                    }
                                    else{
                                        alert(data.msg);
                                    }
                                },'json');

                        }

                    </script>
                </div>
            </div>
@endsection
